@use "../../../tokens";

$button-size: 42px;

.trigger {
  background: white;
  border-radius: 50%;
  border-style: none;
  cursor: pointer;
  height: $button-size;
  padding: 0;
  width: $button-size;
  overflow: hidden;

  &:focus,
  &:hover {
    outline: 2px solid tokens.$color-purple-70;
  }
}

.menuList {
  border-radius: tokens.$border-radius-md;
  box-shadow: tokens.$box-shadow-md;
  font: tokens.$text-body-md;
  list-style-type: none;
  min-width: tokens.$content-xs;
  outline: 0;
  padding: tokens.$spacing-sm 0;
  position: relative;
  right: 0;

  &::before {
    $tooltip-size: 12px;
    background-color: white;
    content: "";
    height: $tooltip-size;
    position: absolute;
    top: 0;
    transform: translateY(-50%) rotate(45deg);
    width: $tooltip-size;
    right: 50px;
  }
}

.menuItemWrapper {
  cursor: pointer;
  padding: tokens.$spacing-sm tokens.$spacing-lg;
  position: relative;

  &:focus {
    outline: none;
    background: tokens.$color-grey-10;
  }

  &:first-of-type {
    // Margin to create visual space between the pseudo element and
    // the first item after it.
    margin-bottom: tokens.$spacing-sm;
    padding: calc(tokens.$spacing-sm * 1.5) calc(tokens.$spacing-md * 1.5);

    b {
      color: tokens.$color-purple-90;
      margin-bottom: tokens.$spacing-xs;
    }

    &::after {
      background: tokens.$monitor-gradient;
      content: "";
      height: 2px;
      left: 0;
      bottom: 0;
      position: absolute;
      width: 100%;
    }
  }
}

.menuItemCta {
  color: tokens.$color-black;
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-decoration: none;
  align-items: center;
  background: none;
  border: 0;
  gap: tokens.$spacing-sm;

  span {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .manageFXAItem {
    display: flex;
    flex-direction: column;
  }
}
